<template>
	<view>
		<!-- 顶部搜索 -->
		<view class="search">
			<u-search shape="round" v-model="keywords" placeholder="搜索食谱教材" @search='search' @custom='search'
				@change='changeinput' @clear='clear' :clearabled="true"></u-search>
		</view>
		<div v-show="keywords === ''">
			<view class="historylist">
				<p class="title">历史搜索</p>
				<view class="hislist">
					<span v-for="(item,index) in historylist" class="oncespan">{{item.name}}</span>
				</view>
			</view>
			<view class="hotlist">
				<p class="title">热门食谱</p>
				<ul>
					<li v-for="(item,index) in hotlist" class="oncelist">
						<div>
							<span :class="index < 3 ? 'sort1' : 'sort2'">{{index+1}}</span>
							<span>{{item.name}}</span>
						</div>
						<span>{{item.csannum}}人浏览</span>
					</li>
				</ul>
			</view>
		</div>
		<div v-if="keywords !== ''" class="searchover">
			<ul>
				<li v-for="(item,index) in searchlist">
					<span :class="index < 3 ? 'sort1' : 'sort2'">{{index+1}}</span>
					<span>{{item.name}}</span>
				</li>
			</ul>
		</div>
	</view>
</template>

<script>
	import {
		gethotrecommend,
		gethistorylist,
		addhistorylist
	} from "../../api/index.js"
	export default {
		data() {
			return {
				keywords: "", //输入框的值
				historylist: [], //历史搜索
				hotlist: [], //热门食谱
				accesslist: [], //获取到的数据
				searchlist: [] //获取到的数据
			}
		},
		methods: {
			search(value) {
				console.log('输入框的值是', value);
				if (value == '') {
					alert('请填写搜索内容')
				} else {
					addhistorylist({
						name: this.keywords
					}).then(res => {
						alert('添加成功')
						console.log(res);
					})
				}
			},
			changeinput(value) {
				console.log('输入的值是', value);
				if (this.keywords != '') {
					this.searchlist = this.accesslist.filter(item => {
						return item.name.includes(this.keywords);
					})
				}
			},
			clear() {
				gethistorylist().then(res => {
					this.historylist = res.data.sort((a, b) => b.id - a.id)
				})
			}
		},
		created() {
			gethotrecommend().then(res => {
					this.accesslist = res.data
					this.hotlist = res.data.sort((a, b) => b.csannum - a.csannum)
					console.log(this.hotlist);
				}),
				gethistorylist().then(res => {
					this.historylist = res.data
				})
		}
	}
</script>

<style scoped lang="scss">
	// 搜索
	.historylist {
		height: 280rpx;
		overflow: hidden;

		.title {
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 40rpx;
		}

		.hislist {
			margin: 0 40rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: flex-start;

			.oncespan {
				font-size: 24rpx;
				margin: 5rpx 5rpx;
				padding: 10rpx 20rpx;
				border-radius: 40rpx;
				background-color: rgb(253, 213, 82);
			}
		}
	}

	// 热门食谱
	.hotlist {
		.title {
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 40rpx;
		}

		ul {
			margin: 0 40rpx;
			padding: 0;
			list-style: none;

			.oncelist {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;

				.sort1 {
					margin-right: 20rpx;
					padding: 0 10rpx;
					border-radius: 100%;
					background-color: rgb(253, 213, 83);
				}

				.sort2 {
					margin-right: 20rpx;
					padding: 0 10rpx;
					border-radius: 100%;
					background-color: white;
				}
			}
		}
	}

	.searchover {

		ul {
			margin: 80rpx 40rpx 0 40rpx;
			padding: 0;
			list-style: none;

			li {
				margin-top: 20rpx;

				.sort1 {
					margin-right: 20rpx;
					padding: 0 10rpx;
					border-radius: 100%;
					background-color: rgb(253, 213, 83);
				}

				.sort2 {
					margin-right: 20rpx;
					padding: 0 10rpx;
					border-radius: 100%;
					background-color: white;
				}
			}
		}
	}
</style>